<template>
    <div class="type">
        <van-search shape="round" v-model="value" placeholder="请输入商品名字" />
        <main>
            <van-sidebar v-model="activeKey" @change="onTypeChange">
                <van-sidebar-item title="休闲食品" />
                <van-sidebar-item title="个护清洁" />
                <van-sidebar-item title="医药保健" />
            </van-sidebar>
            <article>
                <div v-for="item in foodList" :key="item.subType" v-show="show[0].showList">
                    <van-card :title="item.subType" :thumb="item.img" @click="foodListEvt(item.subType)"/>
                </div>
                <div v-for="item in clearList" :key="item.subType" v-show="show[1].showList">
                    <van-card :title="item.subType" :thumb="item.img" @click="clearListEvt(item.subType)"/>
                </div>
                <div v-for="item in medicalList" :key="item.subType" v-show="show[2].showList">
                    <van-card :title="item.subType" :thumb="item.img" @click="medicalListEvt(item.subType)"/>
                </div>
            </article>
        </main>
    </div>
</template>

<script>
    import { clearTypeApi, medicalTypeApi,foodTypeApi } from '../../apis/typeApi'
    export default {
        data() {
            return {
                value:'',
                activeKey:0,
                foodList:[],
                clearList:[],
                medicalList:[],
                show:[{showList:true}, {showList:false}, {showList:false}]
            }
        },
        mounted(){
            Promise.all([
                foodTypeApi(),
                clearTypeApi(),
                medicalTypeApi(),
            ]).then(arr => {
                this.foodList = arr[0].data,
                this.clearList = arr[1].data,
                this.medicalList = arr[2].data
            })
        },
        methods:{
            onTypeChange(index){
                this.show.map(item => item.showList = false)
                this.show[index].showList = true
            },
            foodListEvt(type){
                this.$router.push('/list?type=' + type)
            },
            clearListEvt(type){
                this.$router.push('/list?type=' + type)
            },
            medicalListEvt(type){
                this.$router.push('/list?type=' + type)
            },
        }
    }
</script>

<style lang="less" scoped>
    .van-search{
        background: #fafafa;
    }
    main{
        display: flex;
        height: calc(100% - 54px);
        .van-sidebar{
            width: 100px;
            height: 100%;
            background: #F7F8FA;
        }
        article{
            overflow-x: hidden;
            flex: 1;
            height: 100%;
            div{
                .van-card{
                    margin: 10px;
                    border-radius: 6px;
                    text-align: center;
                    .van-card__content{
                        justify-content: center;
                    }
                }
            }
        }
    }
</style>